<template>
  <el-header style="height: 150px;">
    <el-row style="font-family:cursive">
      <span v-if="!user">
        免费<router-link to="/register">注册</router-link>,请登录(<router-link to="/login">普通用户登录</router-link>/<router-link to="/login2">管理员登录</router-link>)
      </span>
      <span v-else>
          欢迎你,{{user.nickname || user.adname }},
          <a href="" @click.prevent="deleteUser">退出登录</a><!-- 阻止事件的默认行为 -->
        </span>
    </el-row>
    <hr>
    <el-row style="width:100%;margin:30px auto">
        <el-col :span="1"><img src="../assets/images/NO1.jpg" alt=""></el-col>
        <el-col :span="4"><h2 style="color:#4F7298;font-family:cursive;font-size:30px;margin-top:18px">雅黛美妆海外免税购</h2></el-col>
        <el-col :span="11" style="padding-left:100px"><p><HeaderSearch/></p></el-col>
        <el-col :span="7" style="padding-left:100px"><p><HeaderCart/></p></el-col>
        <router-link to="/">商品页</router-link>
    </el-row>
    
  </el-header>
</template>

<script>
import HeaderSearch from "../components/HeaderSearch.vue"
import HeaderCart from "../components/HeaderCart.vue"
import {mapState,mapMutations} from 'vuex'
export default {
components: {
    HeaderCart,
    HeaderSearch,
  },
  computed: {
// 映射user模块state中的user对象
...mapState("user", ["user"]),
},
methods: {
 // 映射user模块mutations中的deleteUser对象
...mapMutations("user",["deleteUser"])
},
}
</script>

<style>
img{
    width: 60px;
    height: 60px;
}
</style>